import { getPersonStudyDetailList, PlanPersonListItem } from '@/api/AiStatisticApi';
import { Modal } from 'antd';
import { FC, Ref, useEffect, useImperativeHandle, useMemo, useState } from 'react';
import type { YmColumnsType } from 'ym-design';
import { YmTable } from 'ym-design';
export type PersonStudyTableProps = {
  finishState?: number | string;
  aiPlanId?: string;
  aiCycleId?: string;
  title?: string;
  //des 是否隐藏查询条件
  isHiddenSearch?: boolean;
  from?: string;
};
interface Props {
  props: PersonStudyTableProps;
  innerRef: Ref<{ showModal: (params: any) => void } | undefined>;
  onChange: () => void;
}

export const PersonStudyDetailModal: FC<Props> = ({ props, innerRef, onChange }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [refreshFlag, _setRefreshFlag] = useState(false);
  /*
   *打开弹窗
   */
  const showModal = () => {
    setIsOpen(true);
  };
  //初始化
  useEffect(() => {
    setConfirmLoading(false);
    _setRefreshFlag((v) => !v);
  }, [isOpen, props]);

  useImperativeHandle(innerRef, () => ({ showModal: showModal }));

  const columns: YmColumnsType<PlanPersonListItem> = useMemo(
    () => [
      {
        title: '编号',
        dataIndex: 'No',
        key: 'No',
        width: 80,
        render(value) {
          return value < 10 ? '0' + value : value;
        },
      },
      {
        title: '姓名',
        dataIndex: 'personName',
        key: 'personName',
        width: 100,
        ellipsis: true,
      },
      {
        title: '电话',
        dataIndex: 'phone',
        key: 'phone',
        width: 123,
        ellipsis: true,
      },
      {
        title: '岗位',
        dataIndex: 'positionName',
        key: 'positionName',
        width: 100,
        ellipsis: true,
      },
      {
        title: '学习状态',
        dataIndex: 'finishState',
        key: 'finishState',
        width: 100,
        render(value) {
          return value === 1 ? (
            <span style={{ color: '#3BD59A' }}>已学习</span>
          ) : (
            <span style={{ color: '#FF4A4A' }}>未学习</span>
          );
        },
      },
    ],
    [],
  );
  return (
    <Modal
      getContainer={false}
      className="person-study-model"
      title={props.title ? props.title : '人员学习明细'}
      maskClosable={false}
      open={isOpen}
      onCancel={() => setIsOpen(false)}
      width={1120}
      centered
      destroyOnClose
      confirmLoading={confirmLoading}
      cancelButtonProps={{ style: { display: 'none' } }}
      okButtonProps={{ style: { display: 'none' } }}
    >
      <YmTable
        columns={columns}
        wrapperStyle={{
          height: 500,
        }}
        toolBar={false}
        searchForm={{
          span: 6,
          formItems: !props.isHiddenSearch
            ? [
                {
                  name: 'personName',
                  label: '姓名',
                  valueType: {
                    inputProps: {},
                  },
                },
                {
                  name: 'phone',
                  label: '电话',
                  valueType: {
                    inputProps: {},
                  },
                },
                {
                  name: 'finishState',
                  label: '学习状态',
                  valueType: {
                    type: 'select',
                    selectProps: {
                      defaultValue: props.finishState,
                      options: [
                        { label: '全部', value: '' },
                        { label: '已学习', value: 1 },
                        { label: '未学习', value: 2 },
                      ],
                      showSearch: false,
                      maxTagCount: 1,
                    },
                  },
                },
              ]
            : [],
        }}
        request={async ({ page }, value = {}) => {
          const state = value.finishState === undefined ? props.finishState : value.finishState;
          let url = '';
          if (props.from == 'detail') {
            url = '/safe/api/aiPlanTask/statistics/aiStudyPersonSituationByEntList';
          } else {
            url = '/safe/api/aiPlanTask/statistics/aiStudyPersonSituationList';
          }
          const result = await getPersonStudyDetailList(
            url,
            { ...props, ...value, finishState: state },
            page?.pageIndex,
            page?.pageSize,
          );
          return result;
        }}
        requestOptions={{
          reFreshDep: [refreshFlag],
        }}
      />
    </Modal>
  );
};
